<template>
  <div class="login pt-4">
    <button @click="back" class="ms-0">返回</button>
      <h2 >用户登录</h2>
      <ul>
          <li class="row">
              <span class="col-3">用户名</span><input class="col-6" type="text" v-model="username">
          </li>
          <li class="row">
              <span class="col-3">密码</span><input class="col-6" type="password" v-model="password">
          </li>

      </ul>
      <button @click="login">登录</button>
      <br>
      <div class="text-end">
        <router-link to="/signin">忘记密码？</router-link>
        <span class="ms-2">
        <router-link to="/signin">没有账号？</router-link>
      </span>
      </div>
      
      
  </div>
</template>

<style>
   
</style>

<script>
import axios from 'axios';
export default {
    data(){
        return {
            username: '',
            password: '',
            users:[]
        }
    },
     created(){
     axios.get(`http://127.0.0.1:4523/m1/1263105-0-default//user`).then(
            (res)=>{
            this.users=res.data.users;
            }
        ).catch((error)=>{
            console.log(error)
        })
    },
    methods: {
        login(){
            let ishave=false
            this.users.forEach(user=>{
                if(user.username===this.username&& user.password===this.password){
                    ishave=true
                    this.$store.state.userInfo.username=this.username
                    this.$store.state.userInfo.password=this.password
                    this.$store.state.userInfo.isLogin=true
                    window.sessionStorage.setItem('userInfo',{ username: this.username, password: this.password, isLogin: true })
                    // 跳转
                    this.$router.go(-1)
                }
            })
            if(!ishave){
                alert('用户名或密码错误')
            }
            
        },
        back(){
        this.$router.go(-1)
        }
    }
}
</script>
<style scoped>
.login .ms-0{
    width: 50px;
    height: 30px;
    line-height: 15px;
    border: 1px solid gray;
}
    .login h2{
        text-align: center;
    }
    .login{
        width: 500px;
        height: 300px;
        background-color: #EFEFEF;
        margin: 50px auto;
        background-image: url(./../assets/bg.jpg);
    }
    .login ul{
        margin: 0 auto;
    }
    .login li{
        list-style: none;
        margin: 10px;
        line-height: 40px;
    }
    .login span{
         text-align: right;
    }
    .login button{
        width: 100px;
        height: 40px;
        padding: 5px;
        margin-left: 200px;
        border-radius: 5px;
        background-color: white;
        border: 2px solid #93d2f3;
    }
    .login button:hover{
        background-color: #93d2f3;
        color: white;
    }
    .login a{
        text-decoration: none;
    }
</style>
